<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS3 3D立方体焦点图动画DEMO演示</title>
	<link rel="stylesheet" href="reset.min.css" type="text/css">
 	<link rel="stylesheet" href="style.css" type="text/css"> 
</head>
<body>

<div class="cube-container">

	<div class="cube initial-position">

		<img class="cube-face-image image-1" src="images/p1300.jpg">
		
		<img class="cube-face-image image-2" src="images/p2300.jpg">
		
		<img class="cube-face-image image-3" src="images/p3300.jpg">
		
		<img class="cube-face-image image-4" src="images/p4300.jpg">
		
		<img class="cube-face-image image-5" src="images/p5300.jpg">
		
		<img class="cube-face-image image-6" src="images/p6300.jpg">

	</div>

</div>

<div class="image-buttons">

	<input type="image" class="show-image-1" src="images/p1100.jpg"></input>

	<input type="image" class="show-image-2" src="images/p2100.jpg"></input>

	<input type="image" class="show-image-3" src="images/p3100.jpg"></input>

	<input type="image" class="show-image-4" src="images/p4100.jpg"></input>

	<input type="image" class="show-image-5" src="images/p5100.jpg"></input>

	<input type="image" class="show-image-6" src="images/p6100.jpg"></input>

</div>
  
    <script  src="index.js"></script>

</body>

</html>
